<template>
	<transition name="fade">
	  <div v-show="visible" class="img_large_warp" @wheel.prevent.stop="scrollBarWheel($event.target,$event)">
	  	<!-- <div class="close" @click="closePreview">
	  		<Icon type="close"></Icon>
	  	</div> -->
			<div class="changebox changebox_left">
				<div class="changeboxIcon changeboxIcon_left" v-show="visible_left" @click="visible_left?handleChange(previewImg.imageId,'left'):''"><Icon type="chevron-left"></Icon></div>
			</div>
			<div class="changebox changebox_right">
				<div class="changeboxIcon changeboxIcon_right" v-show="visible_right" @click="visible_right?handleChange(previewImg.imageId,'right'):''"><Icon type="chevron-right"></Icon></div>
			</div>
			<img id="imgReal" :src="previewImg.originalUrl || previewImg.bigUrl" >
	  	<div class="imgwarp">
	  		<div class="imgwarp_auto" @dragover="dragover">	
	  			<img id="img" :src="previewImg.originalUrl || previewImg.bigUrl" :data-imgid="previewImg.imageId">
	  			<!-- <p class="imgname" v-if="previewImg.imageType">{{previewImg.imageType}} {{"("+imgIndex+'/'+imgCout+")"}}</p> -->
	  		</div>
	  	</div>
	  	<span class="icon_close_rightTop" @click="closePreview"></span>
	  	<div class="operation">
	  		<div class="op-title" v-if="previewImg.imageType">
	  			<p class="imgname">{{previewImg.imageType}}</p><em>{{"("+imgIndex+'/'+imgCout+")"}}</em>
	  		</div>
	  		<ul class='op-ul'>
	  			<li @click="enlarge"><i class="op-icon-enlarge"></i></li>
	  			<li @click="ensmall"><i class="op-icon-ensmall"></i></li>
	  			<li @click="rotate(1)"><i class="op-icon-rotateleft"></i></li>
	  			<li @click="rotate(2)"><i class="op-icon-rotateright"></i></li>
	  		</ul>
	  		<div class="op-close" @click="closePreview">
	  			关闭
	  		</div>
	  	</div>
	  </div>
	</transition>
</template>
<script>
  import Helper from '@/common/helper'
  
  export default {
    name: 'imgPreview',
    data () {
      return {
        previewImg: {},
        visible: false,
        visible_left: false,
        visible_right: false,
        timeout:null,
        imgIndex:0,
        imgCout:0,
        curImgId: null,
      }
    },
    methods: {
    	// 预览图片
      handleView (id) {
        var that = this;
        var index = 0;
        $(".imgwarp").css({"overflow":"hidden"});
      	if(id){
      		that.curImgId = id;
        	index = Helper.getIndex(that.imgList,'imageId',id);
      	}else{
      		that.curImgId = that.imgList[0].imageId;
      	}
				that.imgBack();
      	this.previewImg = that.imgList[index]
      	that.imgIndex = index+1;
      	that.imgCout = that.imgList.length;
        this.visible = true;
        that.handleShowChangeleftAndright(index);
        setTimeout(()=>{
    			this.getImgRealSize(that.curImgId);
        },50)
      },
      dragover(ev){
      	var that = this;
      	// console.log(ev)
      },
    	moverLeft(){
    	},
    	rotate(key) {
    		var that = this;
				var str = 'img[data-imgid='+that.curImgId+']';
				var $ele = $(".imgwarp_auto").find(str);
  			var $modal = $ele.parent();
				var ELE_HEIGHT = $modal.height();
  			var ELE_WIDTH = $modal.width();
				var style = $modal.attr('style');
				var deg = 0;
				if(style.indexOf('transform')>-1){
					var indexRotate = style.indexOf("rotate(");
					var arr = style.slice(indexRotate+7)
					var indexDeg = arr.indexOf("deg)");
					arr = arr.slice(0,indexDeg)
					deg = arr - 0;
				}
    		if(key == 1){
    			deg = deg-90;
    			$modal.css({'transform':'rotate('+deg+'deg)','-webkit-transform':'rotate('+deg+'deg)','-moz-transform':'rotate('+deg+'deg)'})
    		}else if(key == 2){
    			deg = deg+90;
					$modal.css({'transform':'rotate('+deg+'deg)','-webkit-transform':'rotate('+deg+'deg)','-moz-transform':'rotate('+deg+'deg)'})
    		}
    		switch(deg/90%2){
					case 0: // 180 360等
					case -0:
					setTimeout(()=>{
						$modal.css({"margin-top":0})
					},300)
					break;
					case 1:// 90 270等
					case -1:
					setTimeout(()=>{
						$modal.css({"margin-top":(ELE_WIDTH-ELE_HEIGHT)/2})
					},300)
					break;
				}
    	},
    	// 鼠标滚动放大图片
    	enlarge() {
    		var that = this;
        $(".imgwarp").css({"overflow":"auto"});
				var str = 'img[data-imgid='+that.curImgId+']';
				var $ele = $(".imgwarp_auto").find(str);
  			var ELE_HEIGHT = $ele.height();
  			var ELE_WIDTH = $ele.width();
				if(ELE_WIDTH<3600){
	  			var $modal = $ele.parent();
	  			var MODAL_HEIGHT = $modal.height();
	  			var MODAL_WIDTH = $modal.width();
	  			var WIN_HEIGHT = $(window).height();
	  			var WIN_WIDTH = $(window).width();
  				$modal.width(ELE_WIDTH*1.2).height((ELE_HEIGHT*ELE_WIDTH)/ELE_WIDTH*1.2);
  				if($ele.width()>$modal.width()){
  					console.log(($ele.width()-$modal.width())/2)
  					$(".imgwarp").scrollLeft(($ele.width()-$modal.width())/2)
  				}
  			}
    	},
    	// 鼠标滚动缩小图片
    	ensmall() {
    		var that = this;
				$(".imgwarp").css({"overflow":"auto"});
				var str = 'img[data-imgid='+that.curImgId+']';
				var $ele = $(".imgwarp_auto").find(str);
  			var ELE_HEIGHT = $ele.height();
  			var ELE_WIDTH = $ele.width();
  			if(ELE_WIDTH>200){
	  			var $modal = $ele.parent();
	  			var MODAL_HEIGHT = $modal.height();
	  			var MODAL_WIDTH = $modal.width();
	  			var WIN_HEIGHT = $(window).height();
	  			var WIN_WIDTH = $(window).width();
  				$modal.width(ELE_WIDTH*0.8).height((ELE_HEIGHT*ELE_WIDTH)/ELE_WIDTH*0.8);
  			};
    	},
    	scrollBarWheel(element,event){
    		var that = this;
    		if(event.deltaY>0){
    			that.ensmall();
    		}else{
    			that.enlarge();
    		}
    	},
    	getImgRealSize() {
    		var that = this;
				var realWidth;//真实的宽度
				var realHeight;//真实的高度
  			var WIN_HEIGHT = $(window).height();
  			var WIN_WIDTH = $(window).width();
  			// if(ELE_HEIGHT>(WIN_HEIGHT-120)){
  			// 	$modal.height(WIN_HEIGHT-120)
  			// }$ele
  			getheight();
  			function getheight(){
					var str = 'img[data-imgid='+that.curImgId+']';
					var $ele = $(".imgwarp_auto").find(str);
	  			var $modal = $ele.parent();
	  			var MODAL_HEIGHT = $modal.height();
	  			var MODAL_WIDTH = $modal.width();
	  			var ELE_HEIGHT = $ele.height();
  				var ELE_WIDTH = $ele.width();
  				if(ELE_HEIGHT){
						if(ELE_HEIGHT>644){
		  				$modal.height(630)
		  			}
		  			$modal.width(MODAL_WIDTH*$modal.height()/MODAL_HEIGHT)
						$modal.animate({"opacity":1},300);
  				}else{
  					setTimeout(function() {
							getheight();
  					}, 300);
  				}
  			}
    	},
      // 图片左右切换
      handleChange(id,type) {
        var that = this;
        var imageId;
				var $ele = $(".imgwarp_auto").find("img");
  			var $modal = $ele.parent();
				$modal.animate({opacity:0},30).css({'transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)'});
				setTimeout(()=>{
					$modal.css({"margin-top":0})
				},500)
  			setTimeout(()=>{
  				that.imgBack();
	        const index = Helper.getIndex(that.imgList,'imageId',id);
	        if(type == 'left'){
	          imageId = that.imgList[index - 1].imageId;
	        }else if(type == 'right'){
	          imageId = that.imgList[index + 1].imageId;
	        }
	        that.handleView(imageId);
  			},500)
      },
      // 判断左右切换出现与否
      handleShowChangeleftAndright(index) {
        var that = this;
        that.visible_left = true;
        that.visible_right = true;
        var len = that.imgList.length;
        if(index == 0){
          that.visible_left = false;
        }
        if(index+1 == len){
          that.visible_right = false;
        }
      },
      imgBack() {
      	var $ele = $(".imgwarp_auto").find("img");
  			var $modal = $ele.parent();
  			var $img = $("#imgReal");
  			$modal.width("");
				$modal.height("");
				$ele.width("");
				$ele.height("");
      },
      //关闭预览
      closePreview() {
        this.visible = false;
  			var $modal = $(".imgwarp_auto");
				$modal.animate({opacity:0},30).css({'transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)'});
				setTimeout(()=>{
					$modal.css({"margin-top":0})
				},500)
      },
    },
  	props: {
  		imgList: {
        type: Array,
        default: null
      },
    },
    created() {
    	var that = this;
    	//esc关闭
      $(document).keyup(function(event){
			  switch(event.keyCode) {
			  case 27:
			  case 96:
        that.visible = false;
			  break;
			 }
			});
    },
    activated() {

    },
    mounted () {
    }
  }
</script>
<style lang="scss" scoped>
	@import "../assets/sass/install";
	.img_large_warp{
		position: fixed;
		left: 0;
		right: 0;
		top:0;
		bottom:0;
		background-color: rgba(0,0,0,.5); 
		text-align: center;
		overflow: hidden;
		z-index: 3000;
		font-size: 0;
	}
	.changebox{
		display: inline-block;
		width: 50%;
		height: calc(100% - 65px);
		position: fixed;
		top: 0;
		font-size: 14px;
		z-index: 200;
		.changeboxIcon{
			display: inline-block;
			@include transition(500ms);
			@include radius(50%);
			width: 100px;
			height: 100px;
			position: absolute;
			text-align: center;
			line-height: 100px;
			top: 50%;
			margin-top: -50px;
			color: #ccc;
			font-size: 63px;
			opacity: 0;
			cursor: pointer;
			z-index: 3000;
			&:hover{
				color: #fff;
			}
		}
		.changeboxIcon_left{
			right: 20px;
		}
		.changeboxIcon_right{
			left: 20px;
		}
	}
	.changebox_left{
		left: 0px;
		width: calc(50% - 500px);
		&:hover{
			.changeboxIcon_left{
				opacity: 1;
			}
		}
	}
	.changebox_right{
		right: 0px;
		width: calc(50% - 500px);
		&:hover{
			.changeboxIcon_right{
				opacity: 1;
			}
		}
	}
  #imgReal{
		opacity: 0;
	}
	.icon_close_rightTop{
		display: inline-block;
		position: fixed;
		z-index: 300;
		width: 50px;
		height: 50px;
		top: 26px;
		right: 32px;
		background: url(../assets/images/close1.png) no-repeat  2px 2px;
		font-size: 0;
		cursor: pointer;
		&:hover{
			background: url(../assets/images/close2.png) no-repeat  2px 2px;
		}
	}
	.imgwarp{
		position:absolute;
		left: 50%;
		top:50%;
		margin-left: -500px;
		margin-top: -322px;
		width: 1000px;
		height: 644px;
		overflow: auto;
/*		display: flex;
		justify-content: center;
    align-items: center;*/
		/* 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 */
	  &::-webkit-scrollbar-button {
	    display: none;
	  }
	  /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/
	  &::-webkit-scrollbar-track {
	    background: none;
	  }
	  /*内层轨道，滚动条中间部分（除去）。*/
	  &::-webkit-scrollbar-track-piece {
	    background-color: none
	  }
	  /*滚动条里面可以拖动的那部分*/
	  &::-webkit-scrollbar-thumb {
	    background: rgba(225,225,225,0.4);
	    border-radius: 5px;
	  }
	  /*边角*/
	  &::-webkit-scrollbar-corner {
	    background: rgba(0,0,0,0);
	  }
	  /*定义右下角拖动块的样式*/
	  &::-webkit-scrollbar-resizer {}

		.imgwarp_auto{
			display: inline-block;
			width: auto;
			position: relative;
			padding: 6px;
			background-color: #fff;
			opacity: 0;
			@include transition(500ms);
			#img{
				display: block;
				@include transition(500ms);
				width: 100%;
				height: 100%;
			}
			.imgname{
				position: absolute;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				color: #fff;
				text-align: left;
				left: 6px;
				right: 6px;
				bottom: 6px;
				padding-left: 12px;
				background-color: rgba(0,0,0,.6);
			}
		}
	}
	.close{
		position: absolute;
		right: -80px;
		top: -80px;
		font-size: 40px;
		background-color: rgba(225,225,225,.4);
		color: #ccc;
		width: 160px;
		height: 160px;
		text-align: left;
		padding-left: 35px;
		line-height: 219px;
		@include transition(500ms);
		@include radius(50%);
		cursor: pointer;
		&:hover{
			background-color: rgba(225,225,225,.5);
			color: #fff;
		}
	}
	.operation{
		position: absolute;
		bottom: 10px;
		width: 500px;
		height: 35px;
		line-height: 35px;
		padding: 0 12px; 
		background-color: rgba(0,0,0,.8);
		left: 50%;
		margin-left: -250px;
		color: #fff;
		text-align: left;
		@include radius(5px)
		.op-title{
			display: inline-block;
			font-size: 14px;
			width: 58%;
			height: 35px;
			line-height: 35px;
			vertical-align: top;
			.imgname{
				display: inline-block;
				vertical-align: top;
				max-width: 150px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				margin-right: 10px;
			}
			
		}
		.op-ul{
			display: inline-block;
			font-size: 0;
			width: 168px;
			li{
				font-size: 18px;
				height: 35px;
				width: 25px;
				margin: 0 5px;
				padding: 0;
				text-align: center;
				display: inline-block;	
				vertical-align: top;	
				cursor: pointer;	
				i{
					display: block;
					height: 100%;
				}	
			}
			.op-icon-enlarge{
				background: url(../assets/images/icons.png) no-repeat  -416px -804px;
			}
			.op-icon-ensmall{
				background: url(../assets/images/icons.png) no-repeat  -449px -804px;
			}
			.op-icon-rotateleft{
				background: url(../assets/images/icons.png) no-repeat  -416px -843px;
			}
			.op-icon-rotateright{
				background: url(../assets/images/icons.png) no-repeat  -449px -843px;
			}
		}
		.op-close{
			display: inline-block;
			vertical-align: top;
			font-size: 14px;
			margin-left: 5px;
			border-left: 1px solid rgba(255, 248, 248, 0.29);
			height: 20px;
			line-height: 20px;
			padding-left: 15px;
			cursor: pointer;
			width: 50px;
		}
	}
</style>




